<template>
  <div class="off-wrapper">
    <div class="search-container">
      <div id="search-item" class="order-num-container search-item">
        <div class="title">核销订单：</div>
        <el-input v-model="code" type="text" :autofocus="true" placeholder="请输入核销号码" class="input-container" @keyup.enter.native="handleSearch" />
      </div>
    </div>
    <charge-off-list />
  </div>
</template>

<script>
import ChargeOffList from '@/components/chargeOffList'
import { chargeOff } from '@/api/order'
export default {
  name: 'OrderList',
  components: {
    ChargeOffList
  },
  data() {
    return {
      code: '',
      refresh: false
    }
  },
  methods: {
    async handleSearch() {
      const { code } = this
      if (code.trim() === '') {
        this.$message.warning({
          message: '请输入核销码',
          duration: 1000
        })
      }
      try {
        await chargeOff({ write_off_code: code })
        this.$message.success({
          message: '核销成功',
          duration: 1000
        })
        this.$store.dispatch('app/setCharge', true)
      } catch (error) {
        this.$message.success({
          message: '核销失败',
          duration: 1000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.off-wrapper {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
  .search-container{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    .search-item {
      display: flex;
      align-items: center;
      margin-right: 20px;
      .title {
        font-size: 26px;
        color: #409EFF
      }
      .input-container{
        width: 300px;
        height: 60px;
        font-size: 35px;
      }
    }
  }
}
</style>
